cqjs.component('pageView', {
    template: `
    <div style="padding: 20px">
          <div class="grid-view" v-show="step === 'search'">
            <div class="tool-bar" style="display: flex; justify-content: space-between; padding: 5px 0">
              <div>
                <el-button size="mini" type="success" @click="handleClick">创建</el-button>
                <el-dropdown size="mini" split-button type="primary" @click="handleClick" @command="handleCommand">
                  编辑
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="delete">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="20"
                layout="total, sizes, prev, pager, next, jumper"
                :total="100"
                :pager-count="5"
                small
                background
                hide-on-single-page
              />
            </div>
            <el-table :data="tableList" border fit highlight-current-row highlight-selection-row style="width: 100%">
              <el-table-column type="index" />
              <el-table-column
                v-for="item in tableColumn"
                :key="item"
                :prop="item"
                :label="tableFields[item].label"
                :width="tableFields[item].width"
                resizable
                :formatter="formatterTableData"
                :sortable="tableFields[item].sortable"
              />
            </el-table>
          </div>
          <div class="form-view" v-show="step === 'operate'">
            <div>
              <el-button size="mini" type="success" @click="handleClick('save')">创建</el-button>
              <el-button size="mini" type="primary" @click="handleClick('save')">保存</el-button>
            </div>
            <el-form
              :model="formData"
              label-width="100px"
              label-position="top"
              size="mini"
              style="display: grid; grid-template-columns: repeat(4, 1fr)"
            >
              <el-form-item :label="tableFields.f_char.label" prop="f_char" style="grid-column: span 2">
                <el-input v-model="formData.f_char" />
              </el-form-item>
              <el-form-item :label="tableFields.f_char_ext.label" prop="f_char_ext">
                <el-input v-model="formData.f_char_ext" />
              </el-form-item>
              <el-form-item :label="tableFields.f_float.label" prop="f_float">
                <el-input-number
                  v-model="formData.f_float"
                  :min="tableFields.f_float.min"
                  :max="tableFields.f_float.max"
                  :precision="2"
                  controls-position="right"
                  style="width: 100%"
                />
              </el-form-item>
              <el-form-item :label="tableFields.f_int.label" prop="f_int">
                <el-input-number
                  v-model="formData.f_int"
                  :min="tableFields.f_int.min"
                  :max="tableFields.f_int.max"
                  controls-position="right"
                  :precision="0"
                  style="width: 100%"
                />
              </el-form-item>
              <el-form-item :label="tableFields.f_priority.label" prop="f_priority">
                <el-rate
                  v-model="formData.f_priority"
                  clearable
                  allow-half
                  :texts="Object.values(tableFields.f_priority.options)"
                />
              </el-form-item>
              <el-form-item :label="tableFields.f_bool.label" prop="f_bool">
                <el-switch v-model="formData.f_bool" active-text="Open" inactive-text="Close" />
              </el-form-item>
              <el-form-item :label="tableFields.f_selection.label" prop="f_selection">
                <el-select v-model="formData.f_selection" clearable style="width: 100%">
                  <el-option v-for="(value, key) in tableFields.f_selection.options" :key="key" :label="value" :value="key" />
                </el-select>
              </el-form-item>
              <el-form-item :label="tableFields.f_time.label" prop="f_time">
                <el-time-picker v-model="formData.f_time" arrow-control placeholder="Arbitrary time"  
                        format="HH:mm:ss"
                        style="width: 100%"
                        value-format="HH:mm:ss"/>
              </el-form-item>
              <el-form-item :label="tableFields.f_text.label" prop="f_text">
                <el-input v-model="formData.f_text" autosize type="textarea" placeholder="Please input" />
              </el-form-item>
              <el-form-item :label="tableFields.f_html.label" prop="f_html">
                <el-input v-model="formData.f_html" autosize type="textarea" placeholder="Please input" />
              </el-form-item>
              <el-form-item :label="tableFields.f_radio.label" prop="f_radio">
                <el-radio-group v-model="formData.f_radio">
                  <el-radio v-for="(key, value) in tableFields.f_radio.options" :label="key">{{ value }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-collapse value="1" accordion style="grid-column: span 2">
                <el-collapse-item title="日期" name="1">
                  <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
                    <el-form-item :label="tableFields.f_date.label" prop="f_date">
                      <el-date-picker
                        v-model="formData.f_date"
                        type="date"
                        placeholder="Pick a day"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"                        
                        style="width: 100%"
                      />
                    </el-form-item>
                    <el-form-item :label="tableFields.f_datetime.label" prop="f_datetime">
                      <el-date-picker
                        v-model="formData.f_datetime"
                        type="datetime"
                        placeholder="Pick a Date"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        style="width: 100%"
                      />
                    </el-form-item>
                    <el-form-item :label="tableFields.f_datetime_range_form.label" prop="f_datetime_range_form">
                      <el-date-picker
                        v-model="formData.f_datetime_range_form"
                        type="datetimerange"
                        :shortcuts="shortcuts"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        style="width: 100%"
                      />
                    </el-form-item>
                    <el-form-item :label="tableFields.f_time_range.label" prop="f_time_range">
                      <el-time-picker
                        v-model="formData.f_time_range"
                        is-range
                        arrow-control
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        format="HH:mm:ss"
                        value-format="HH:mm:ss"
                        style="width: 100%"
                      />
                    </el-form-item>
                  </div>
                </el-collapse-item>
              </el-collapse>
              <el-collapse value="1" accordion style="grid-column: span 2">
                <el-collapse-item title="关联关系" name="1">
                  <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
                    <el-form-item :label="tableFields.f_m2o_id.label" prop="f_m2o_id">
                      <el-select v-model="formData.f_m2o_id" clearable style="width: 100%">
                        <el-option
                          v-for="(value, key) in tableFields.f_selection.options"
                          :key="key"
                          :label="value"
                          :value="key"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item :label="tableFields.f_m2m_tags.label" prop="f_m2m_tags">
                      <el-select v-model="formData.f_m2m_tags" multiple clearable style="width: 100%">
                        <el-option
                          v-for="(value, key) in tableFields.f_selection.options"
                          :key="key"
                          :label="value"
                          :value="key"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </el-collapse-item>
              </el-collapse>
              <el-collapse value="1" accordion style="grid-column: span 4">
                <el-collapse-item title="图片" name="1">
                  <div style="display: grid; grid-template-columns: repeat(3, 1fr)">
                    <el-form-item :label="tableFields.f_image.label" prop="f_image">
                      <el-upload
                        :file-list="formData.f_image"
                        class="avatar-uploader"
                        action="#"
                        :show-file-list="false"
                        :http-request="handleHttpRequest"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :on-change="handleFileChange('f_image')"
                      >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon" />
                      </el-upload>
                    </el-form-item>
                    <el-form-item :label="tableFields.f_image_db.label" prop="f_image_db">
                      <el-upload
                        :file-list="formData.f_image_db"
                        action="#"
                        list-type="picture-card"
                        :http-request="handleHttpRequest"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-change="handleFileChange('f_image_db')"
                      >
                        <i class="el-icon-plus" />
                      </el-upload>
                    </el-form-item>
                    <el-form-item :label="tableFields.f_multiple_image.label" prop="f_multiple_image">
                      <el-upload
                        :file-list="formData.f_multiple_image"
                        action="#"
                        multiple
                        list-type="picture-card"
                        :http-request="handleHttpRequest"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-change="handleFileChange('f_multiple_image')"
                      >
                        <i class="el-icon-plus" />
                      </el-upload>
                    </el-form-item>
                    <el-dialog v-model:visible="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                  </div>
                </el-collapse-item>
              </el-collapse>
              <el-collapse value="1" accordion style="grid-column: span 4">
                <el-collapse-item title="文件" name="1">
                  <div style="display: grid; grid-template-columns: repeat(3, 1fr)">
                    <el-form-item :label="tableFields.f_file.label" prop="f_file">
                      <el-upload
                        :file-list="formData.f_file"
                        class="avatar-uploader"
                        action="#"
                        :http-request="handleHttpRequest"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :on-change="handleFileChange('f_file')"
                      >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                      </el-upload>
                    </el-form-item>
                    <el-form-item :label="tableFields.f_file_db.label" prop="f_file_db">
                      <el-upload
                        :file-list="formData.f_file_db"
                        action="#"
                        :http-request="handleHttpRequest"
                        list-type="picture"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-change="handleFileChange('f_file_db')"
                      >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                      </el-upload>
                    </el-form-item>
                    <el-form-item :label="tableFields.f_big_file.label" prop="f_big_file">
                      <el-upload
                        :file-list="formData.f_big_file"
                        action="#"
                        multiple
                        drag
                        :http-request="handleHttpRequest"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-change="handleFileChange('f_big_file')"
                      >
                        <i class="el-icon-upload" />
                        <div class="e l-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                      </el-upload>
                    </el-form-item>
                  </div>
                </el-collapse-item>
              </el-collapse>
              <el-collapse value="1" accordion style="grid-column: span 4">
                <el-collapse-item title="文件" name="1">
                  <div style="display: grid; grid-template-columns: repeat(1, 1fr)">
                    <el-form-item :label="tableFields.f_calendar.label" prop="f_calendar">
                      <el-calendar v-model="formData.f_calendar" />
                    </el-form-item>
                  </div>
                </el-collapse-item>
              </el-collapse>
              <el-tabs type="border-card" style="grid-column: span 4; margin: 0 25px 0 10px">
                <el-tab-pane label="一对多">
                  <div class="tool-bar" style="display: flex; justify-content: space-between; padding: 5px 0">
                    <div>
                      <el-button size="mini" type="success" @click="handleClick">创建</el-button>
                      <el-dropdown size="mini" split-button type="primary" @click="handleClick" @command="handleCommand">
                        编辑
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item command="delete">删除</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage4"
                      :page-sizes="[5, 10, 15, 20]"
                      :page-size="20"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="100"
                      :pager-count="5"
                      small
                      background
                      hide-on-single-page
                    />
                  </div>
                  <el-table :data="tableList" border style="width: 100%">
                    <el-table-column type="index" />
                    <el-table-column
                      v-for="item in tableColumn"
                      :key="item"
                      :prop="item"
                      :label="tableFields[item].label"
                      :width="tableFields[item].width"
                      resizable
                      :formatter="formatterTableData"
                      :sortable="tableFields[item].sortable"
                    />
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="多对多">
                  <div class="tool-bar" style="display: flex; justify-content: space-between; padding: 5px 0">
                    <div>
                      <el-button size="mini" type="success" @click="handleClick">创建</el-button>
                      <el-dropdown size="mini" split-button type="primary" @click="handleClick" @command="handleCommand">
                        编辑
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item command="delete">删除</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage4"
                      :page-sizes="[5, 10, 15, 20]"
                      :page-size="20"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="100"
                      :pager-count="5"
                      small
                      background
                      hide-on-single-page
                    />
                  </div>
                  <el-table :data="tableList" border style="width: 100%">
                    <el-table-column type="index" />
                    <el-table-column
                      v-for="item in tableColumn"
                      :key="item"
                      :prop="item"
                      :label="tableFields[item].label"
                      :width="tableFields[item].width"
                      resizable
                      :formatter="formatterTableData"
                      :sortable="tableFields[item].sortable"
                    />
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </el-form>
          </div>
        </div>
    `,
    data() {
        return {
            step: 'search',
            tableList: [],
            tableColumn: ['f_char', 'f_char_ext', 'f_bool', 'f_date', 'f_datetime', 'f_float', 'f_text', 'f_int', 'f_selection', 'f_compute', 'f_m2o_id'],
            tableFields: {},
            currentPage4: 1,
            formData: {
                f_char: undefined,
                f_char_ext: undefined,
                f_float: undefined,
                f_int: undefined,
                f_priority: undefined,
                f_bool: undefined,
                f_selection: undefined,
                f_time: undefined,
                f_text: undefined,
                f_html: undefined,
                f_radio: undefined,
                f_date: undefined,
                f_datetime: undefined,
                f_datetime_range_form: undefined,
                f_time_range: undefined,
                f_m2o_id: undefined,
                f_m2m_tags: undefined,
                f_image: undefined,
                f_image_db: undefined,
                f_multiple_image: undefined,
                f_file: undefined,
                f_file_db: undefined,
                f_big_file: undefined,
                f_calendar: undefined,
            },
            shortcuts: [
                {
                    text: '前一个星期',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        return [start, end]
                    },
                },
                {
                    text: '前一个月',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        return [start, end]
                    },
                },
                {
                    text: '前三个月',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        return [start, end]
                    },
                },
            ],
            imageUrl: '',
            dialogVisible: false,
            dialogImageUrl: ''
        }
    },
    methods: {
        // 获取表格数据
        getTableData() {
            const list = []
            for (let i = 0; i < 20; i++) {
                list.push({
                    f_bool: true,
                    f_char: "char1",
                    f_char_ext: "",
                    f_compute: "char1(true)",
                    f_date: "2021-01-07",
                    f_datetime: "2021-01-07 01:01:01",
                    f_float: Math.ceil(Math.random() * 100 + 1) / 10,
                    f_int: Math.ceil(Math.random() * 10 + 1),
                    f_m2o_id: null,
                    f_selection: "7",
                    f_text: "Initializing Spring DispatcherServlet 'dispatcherServlet'",
                    id: "03jh051t38tts"
                })
            }
            return list
        },
        getTableField() {
            return {
                "f_time_range": {
                    "name": "f_time_range",
                    "type": "char",
                    "label": "范围时间",
                    "help": null,
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "translate": false,
                    "length": 240,
                    "trim": true,
                    "sortable": true,
                    "defaultValue": null
                },
                "f_char_ext": {
                    "name": "f_char_ext",
                    "type": "char",
                    "label": "文本扩展",
                    "help": "扩展的文本字段",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "translate": false,
                    "length": 240,
                    "trim": true,
                    "sortable": true,
                    "defaultValue": null,
                    width: 120
                },
                "f_multiple_image": {
                    "name": "f_multiple_image",
                    "type": "image",
                    "label": "多图片",
                    "help": "可上传多张图片，只支持附件形式保存",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "attachment": true,
                    "maxWidth": null,
                    "maxHeight": null,
                    "sortable": false,
                    "defaultValue": null
                },
                "f_file": {
                    "name": "f_file",
                    "type": "binary",
                    "label": "附件",
                    "help": "可配置上传单个或多个文件，以附件形式保存",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "attachment": true,
                    "sortable": false,
                    "defaultValue": null
                },
                "f_date": {
                    "name": "f_date",
                    "type": "date",
                    "label": "日期",
                    "help": "日期字段",
                    "readonly": false,
                    "store": true,
                    "required": true,
                    "sortable": true,
                    "defaultValue": null,
                    width: 150
                },
                "f_image": {
                    "name": "f_image",
                    "type": "image",
                    "label": "图片",
                    "help": "以附件形式保存，通过URL下载",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "attachment": true,
                    "maxWidth": null,
                    "maxHeight": null,
                    "sortable": false,
                    "defaultValue": null
                },
                "f_m2m_ids": {
                    "name": "f_m2m_ids",
                    "type": "many2many",
                    "label": "多对多",
                    "help": "多对多关联，中间表保存关系，以列表形式编辑",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "context": {},
                    "comodel": "demo.many2many",
                    "sortable": false,
                    "defaultValue": null
                },
                "f_bool": {
                    "name": "f_bool",
                    "type": "boolean",
                    "label": "布尔",
                    "help": "布尔字段",
                    "readonly": false,
                    "store": true,
                    "required": true,
                    "sortable": true,
                    "defaultValue": null,
                    width: 80
                },
                "f_file_db": {
                    "name": "f_file_db",
                    "type": "binary",
                    "label": "附件(DB)",
                    "help": "以二进制格式保存于数据库，通过Base64加载，只可上传单个文件，不建议用这种方式保存文件",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "attachment": false,
                    "sortable": false,
                    "defaultValue": null
                },
                "f_m2o_id": {
                    "name": "f_m2o_id",
                    "type": "many2one",
                    "label": "多对一",
                    "help": "多对一关联",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "context": {},
                    "comodel": "demo.many2one",
                    "sortable": true,
                    "defaultValue": null,
                    "link": true,
                    width: 90
                },
                "f_text": {
                    "name": "f_text",
                    "type": "text",
                    "label": "大文本",
                    "help": "大文本字段",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "translate": false,
                    "sortable": true,
                    "defaultValue": null
                },
                "id": {
                    "name": "id",
                    "type": "char",
                    "label": "ID",
                    "help": null,
                    "readonly": true,
                    "store": true,
                    "required": false,
                    "sortable": true,
                    "defaultValue": null
                },
                "f_int": {
                    "name": "f_int",
                    "type": "integer",
                    "label": "整数",
                    "help": "整数字段",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "max": undefined,
                    "min": undefined,
                    "sortable": true,
                    "defaultValue": null,
                    width: 80
                },
                "create_date": {
                    "name": "create_date",
                    "type": "datetime",
                    "label": "创建时间",
                    "help": null,
                    "readonly": true,
                    "store": true,
                    "required": false,
                    "sortable": true,
                    "defaultValue": null
                },
                "f_html": {
                    "name": "f_html",
                    "type": "html",
                    "label": "HTML",
                    "help": "HTML字段",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "translate": false,
                    "sortable": true,
                    "defaultValue": null
                },
                "f_big_file": {
                    "name": "f_big_file",
                    "type": "uploadModal",
                    "label": "大文件",
                    "help": null,
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "attachment": true,
                    "sortable": false,
                    "defaultValue": null
                },
                "f_datetime": {
                    "name": "f_datetime",
                    "type": "datetime",
                    "label": "日期时间",
                    "help": "日期时间，数据库保存UTC",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "sortable": true,
                    "defaultValue": null,
                    width: 200
                },
                "f_compute": {
                    "name": "f_compute",
                    "type": "char",
                    "label": "计算字段",
                    "help": null,
                    "readonly": false,
                    "store": false,
                    "required": false,
                    "translate": false,
                    "length": 240,
                    "trim": true,
                    "sortable": false,
                    "defaultValue": null,
                    width: 120
                },
                "f_count_down": {
                    "name": "f_count_down",
                    "type": "char",
                    "label": "倒计时",
                    "help": null,
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "translate": false,
                    "length": 240,
                    "trim": true,
                    "sortable": true,
                    "defaultValue": null
                },
                "f_selection": {
                    "name": "f_selection",
                    "type": "selection",
                    "label": "选择",
                    "help": "选择字段",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "static": true,
                    "sortable": true,
                    "defaultValue": null,
                    "options": {
                        "1": "星期一",
                        "2": "星期二",
                        "3": "星期三",
                        "4": "星期四",
                        "5": "星期五",
                        "6": "星期六",
                        "7": "星期天"
                    },
                    width: 120
                },
                "f_float": {
                    "name": "f_float",
                    "type": "float",
                    "label": "小数",
                    "help": "小数字段，默认两位小数",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "max": undefined,
                    "min": undefined,
                    "sortable": true,
                    "defaultValue": null,
                    width: 80
                },
                "f_o2m_ids": {
                    "name": "f_o2m_ids",
                    "type": "one2many",
                    "label": "一对多",
                    "help": "一对多关联，在多的表中保存一的外键",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "context": {},
                    "inverseName": "field_id",
                    "comodel": "demo.one2many",
                    "sortable": false,
                    "defaultValue": null
                },
                "create_uid": {
                    "name": "create_uid",
                    "type": "many2one",
                    "label": "创建人",
                    "help": null,
                    "readonly": true,
                    "store": true,
                    "required": false,
                    "context": {},
                    "comodel": "rbac.user",
                    "sortable": true,
                    "defaultValue": null,
                    "link": true
                },
                "f_priority": {
                    "name": "f_priority",
                    "type": "selection",
                    "label": "评分",
                    "help": "评分字段",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "static": true,
                    "sortable": true,
                    "defaultValue": null,
                    "options": {
                        "1": "不推荐",
                        "2": "一般",
                        "3": "不错",
                        "4": "很棒",
                        "5": "极力推荐"
                    }
                },
                "f_radio": {
                    "name": "f_radio",
                    "type": "selection",
                    "label": "单选",
                    "help": "单选字段",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "static": true,
                    "sortable": true,
                    "defaultValue": null,
                    "options": {
                        "1": "星期一",
                        "2": "星期二",
                        "3": "星期三",
                        "4": "星期四",
                        "5": "星期五"
                    }
                },
                "update_date": {
                    "name": "update_date",
                    "type": "datetime",
                    "label": "修改时间",
                    "help": null,
                    "readonly": true,
                    "store": true,
                    "required": false,
                    "sortable": true,
                    "defaultValue": null
                },
                "f_calendar": {
                    "name": "f_calendar",
                    "type": "char",
                    "label": " ",
                    "help": null,
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "translate": false,
                    "length": 240,
                    "trim": true,
                    "sortable": true,
                    "defaultValue": null
                },
                "f_image_db": {
                    "name": "f_image_db",
                    "type": "image",
                    "label": "图片(DB)",
                    "help": "以二进制格式保存于数据库，通过Base64加载，只可上传单张图片",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "attachment": false,
                    "maxWidth": null,
                    "maxHeight": null,
                    "sortable": false,
                    "defaultValue": null
                },
                "f_preview": {
                    "name": "f_preview",
                    "type": "char",
                    "label": " ",
                    "help": null,
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "translate": false,
                    "length": 240,
                    "trim": true,
                    "sortable": true,
                    "defaultValue": null
                },
                "f_datetime_range_form": {
                    "name": "f_datetime_range_form",
                    "type": "char",
                    "label": "范围日期时间",
                    "help": null,
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "translate": false,
                    "length": 240,
                    "trim": true,
                    "sortable": true,
                    "defaultValue": null
                },
                "f_char": {
                    "name": "f_char",
                    "type": "char",
                    "label": "字符",
                    "help": "字符串类型字段，默认长度240",
                    "readonly": false,
                    "store": true,
                    "required": true,
                    "translate": false,
                    "length": 240,
                    "trim": true,
                    "sortable": true,
                    "defaultValue": null,
                    width: 80
                },
                "f_m2m_tags": {
                    "name": "f_m2m_tags",
                    "type": "many2many",
                    "label": "多对多",
                    "help": "多对多关联，中间表保存关系，以标签tags形式编辑",
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "context": {},
                    "comodel": "demo.many2many",
                    "sortable": false,
                    "defaultValue": null
                },
                "f_time": {
                    "name": "f_time",
                    "type": "char",
                    "label": "时间",
                    "help": null,
                    "readonly": false,
                    "store": true,
                    "required": false,
                    "translate": false,
                    "length": 240,
                    "trim": true,
                    "sortable": true,
                    "defaultValue": null
                },
                "update_uid": {
                    "name": "update_uid",
                    "type": "many2one",
                    "label": "修改人",
                    "help": null,
                    "readonly": true,
                    "store": true,
                    "required": false,
                    "context": {},
                    "comodel": "rbac.user",
                    "sortable": true,
                    "defaultValue": null,
                    "link": true
                },
                "present": {
                    "name": "present",
                    "type": "char",
                    "label": "呈现",
                    "help": null,
                    "readonly": false,
                    "store": false,
                    "required": false,
                    "translate": false,
                    "length": 240,
                    "trim": true,
                    "sortable": false,
                    "defaultValue": null
                }
            }
        },
        formatterTableData(row, column, cellValue, index) {
            const options = this.tableFields[column.property].options
            if (options) {
                return options[cellValue]
            }
            return cellValue
        },
        handleClick(type) {
            if (type === 'save') {
                console.log(this.formData)
            }else{
                this.step = 'operate'
            }
        },
        handleCommand(command) {
            console.log(command)
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleHttpRequest(){
            return new Promise(resolve => {
                resolve(true)
            })
        },
        handleFileChange(key){
            return (file, fileList)=>{
                this.formData[key] = fileList
            }
        }
    },
    created() {
        this.tableList = this.getTableData()
        this.tableFields = this.getTableField()
    }
});